<template>
    <div class="calender">
        <div class="month">{{my_month}}</div>
        <div class="day">{{my_day}}</div>
        <div class="year-week">
            <div class="year">{{my_year}}</div>
            <div class="week">{{my_week}}</div>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    background: rgba(227, 227, 227);
}

.calender, .month, .day, .year-week, .year-week .week {
    background: rgba(255, 255, 255);
}

.calender, .year-week .year, .year-week .week {
    box-sizing: border-box;
}

.calender {
    width: 275px;
    background-size: cover;
    height: 250px;
    border-radius: 25px;
    box-shadow: 2px 5px 10px 1px rgb(0, 0, 0, 0.2);
    padding: 28px 0;
}

.month {
    color: rgba(178, 217, 214);
    height: 33px;
    text-align: center;
    font-size: 32px;
    letter-spacing: 4px;
    line-height: 33px;
}

.day {
    height: 119px;
    font-size: 75px;
    letter-spacing: 4px;
    color: rgba(87, 87, 87);
    text-align: center;
    line-height: 119px;
}

.year-week {
    height: 42px;
    display: flex;
    font-size: 28px;
    letter-spacing: 4px;
}

.year-week .year {
    height: 42px;
    width: 50%;
    background: rgba(178, 217, 214);
    color: rgba(255, 255, 255);
    text-align: right;
    padding-right: 14px;
    line-height: 42px;
}

.year-week .week {
    width: 50%;
    color: rgba(87, 87, 87);
    padding-left: 9px;
}
</style>

<script>
export default {
    data() {
        return {
            my_date: '',
            my_year: '',
            my_month: '',
            my_week: '',
            my_day: ''
        }
    }, 
    created() {
        this.updateDate();
    },
    methods: {
        updateDate() {
            const MONTHNAME = ["January","February","March","April","May","June","July","Auguest","September","October","November","December"];
            const WEEK = [ "Sun.", "Mon.", "Tues.", "Wed.", "Thur.", "Fri.", "Sat."];

            this.my_date = new Date();
            this.my_year = this.my_date.getFullYear();
            this.my_month = MONTHNAME[this.my_date.getMonth() + 1];
            this.my_week = this.my_date.getDay();
            this.my_week = `|  ${WEEK[this.my_week]}`;
            this.my_day = this.my_date.getDate();
        }
    }
}
</script>